<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<view class="gui-flex gui-justify-content-center gui-space-between ">
				<view class="title">快捷登录</view>
			</view>
			<view class="logo">
				<image src="/static/logo.png" style="width:120px;border-radius: 44rpx;" mode="widthFix"></image>
			</view>
		</view>
		<view class="buttom">
			<view class="loginType">
				<view class="gui-flex gui-columns gui-justify-content-center gui-align-items-center">
					<text class="gui-text-small">授权登录</text>
					<view class="gui-margin-top">

					</view>
					<view>
						<button style="width:282rpx;" hover-class="gui-tap"
							class="gui-button gui-bg-primary gui-noborder gui-border-radius" data-eventsync="true"
							open-type="getUserProfile" @tap="getUserInfo">
							<text class="gui-icons gui-color-white gui-button-text">登录</text>
						</button>
					</view>
				</view>
			</view>
			<view class="hint">
				登录代表同意
				<text class="link">用户协议、隐私政策，</text>
				并授权使用您的账号信息（如昵称、头像、地理位置信息，手机号）以便您统一管理
			</view>
		</view>
	</view>
</template>

<script>
	import request from '@/api/request.js'
	import {
		useUserStore
	} from '@/store/user.js'
	const useUser = useUserStore()
	export default {
		data() {
			return {
				openid: null,
				unionid: null,
				userInfo: {},
				audio: null
			}
		},
		onLoad() {
			this.getOpenid()
			// this.loadMusic()
		},
		onUnload() {},
		methods: {
			toReg() {
				uni.navigateTo({
					url: "/pages/user/register"
				})
			},
			loadMusic() {
				this.audio = uni.$hl.createHlAudio('login02', true, true);
				this.audio.play()
			},
			getOpenid() {
				tt.login({
					success: async (res) => {
						if (res.code) {
							const {
								openid,
								unionid
							} = await request.post("tt/openid", {
								code: res.code
							})
							console.log(openid,unionid)
							this.openid = openid
							this.unionid = unionid
							
						} else {
							console.log('登录失败！' + res.errMsg)
						}
					}
				})
			},
			async getUserInfo() {
				let ctx = uni.$hl.createHlAudio('menu', false, false)
				ctx.play()
				await tt.getUserProfile({
					force: true,
					success: async (info) => {
						this.userInfo = info.userInfo
						//将openid和untionid添加上
						this.userInfo['openid'] = this.openid
						this.userInfo['unionid'] = this.unionid
						const {
							data
						} = await request.post("tt/login", this.userInfo)
						if (data.token) {
							uni.setStorageSync("token", data.token)
							useUser.storeUser(data.user)
							ctx.stop();
							uni.reLaunch({
								url: `/pages/index/index`
							})
						}
					},
					fail: (e) => {
						console.log(e)
						ctx.stop();
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		position: relative;
		font-size: 28rpx;

		.switch {
			position: absolute;
			right: 40rpx;
			top: 12rpx;
		}

		.content {
			width: 600rpx;
			margin: 80rpx auto 0;

			.title {
				text-align: left;
				font-size: 60rpx;
				font-weight: 500;
				margin-bottom: 100rpx;
			}

			.logo {
				display: flex;
				justify-content: center;
				text-align: center;
			}

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;
			}

		}

		.buttom {
			.loginType {
				display: flex;
				padding: 150rpx 150rpx 150rpx 150rpx;
				justify-content: center;
			}

			.hint {
				margin-top: 140rpx;
				padding: 20rpx 40rpx;
				font-size: 20rpx;
				color: #909193;

				.link {
					color: #f9ae3d;
				}
			}
		}
	}
</style>